<template>
  <div class="tab-radio">
    <el-form-item :label="label">
      <el-radio-group v-model="currentName">
        <el-radio-button v-for="(radio, index) in tabList" :key="index" :label="radio.name">
          <span class="label">{{ radio.label }}</span>
          <span v-if="radio.num" class="count">{{ radio.num }}</span>
        </el-radio-button>
      </el-radio-group>
    </el-form-item>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'TabRadio',
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, defineEmits, defineProps, PropType } from 'vue'

import IBaseObj from '#/index'

const props = defineProps({
  label: {
    type: String,
    default: '订单状态:',
  },
  tabList: {
    type: Array as PropType<IBaseObj[]>,
    default: () => [],
  },
  activeName: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:active-name'])

const currentName = computed({
  get: () => props.activeName,
  set: (val) => {
    emit('update:active-name', val)
  },
})
</script>
<style lang="scss" scoped>
.tab-radio {
  padding: 20px 0 0 15px;

  :deep() {
    .el-radio-group {
      .el-radio-button {
        .el-radio-button__inner {
          padding: 0 30px;
          margin-right: 2px;
          color: var(--submenu-text-color);
          background: var(--tab-item-color);
          border: none;
        }

        .el-radio-button__orig-radio:checked + .el-radio-button__inner {
          color: var(--submenu-text-color-active);
          background: var(--submenu-background-active-color);
          border: none;
        }

        &:first-child .el-radio-button__inner {
          margin-right: 2px;
          border-radius: 13px 0 0 13px;
        }

        &:last-child .el-radio-button__inner {
          margin-right: 5px;
          border-radius: 0 13px 13px 0;
        }

        .count {
          margin-left: 4px;
          color: #ea6343;
        }
      }
    }
  }
}
</style>
